<template>
    <div class="data-rights">
        <div class="tips">你可以通过规则定义该角色在使用某功能时的可见范围，例如可以设置角色A在「发货单」功能中只能查看“店铺B”和“店铺C”的“发货单”，其它店铺不可见。</div>
        <div class="grid-wrap">
            <el-table style="width:100%;"
                        row-key="id"
                        :data="tableData.data">
                <el-table-column label="字段" prop="field_desc" ></el-table-column>
                <el-table-column label="可用范围" prop="name" >
                     <template #default="scope">
                        <div>{{scope.row.group_names ? '受限' : '不受限'}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleView(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="drawerParams.drawerShow" direction="rtl" size="563">
            <template #header>
                <div style="font-size:18px;font-weight:500;color:#303133">{{drawerParams.title}}</div>
            </template>
            <template #default>
                <div class="drawer-panel">
                    <div class="row">
                        <div class="title">{{drawerParams.field_desc}}可见范围</div>
                        <template v-if="drawerParams.is_edit">
                            <el-button plain @click="drawerParams.is_edit = false">取消</el-button>

                            <el-button type="primary" @click="save">保存</el-button>

                        </template>
                        <template v-else>
                            <el-button type="primary" @click="drawerParams.is_edit = true">编辑</el-button>
                        </template>
                    </div>
                    <div class="radio-wrap">
                        <el-radio-group :disabled="!drawerParams.is_edit" v-model="drawerParams.is_astrict">
                            <el-radio :label="false">查看{{drawerParams.field_desc}}不受限</el-radio>
                            <el-radio :label="true">查看{{drawerParams.field_desc}}受限</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="data-wrap" v-if="drawerParams.is_astrict">
                        <div class="data-item" v-if="drawerParams.data_list.length > 0">
                            <div class="data-item-header">
                                <div class="label">1.请选择查看{{drawerParams.field_desc}}受限的功能列表</div>
                                <el-checkbox v-model="drawerParams.data_check_all" 
                                             :indeterminate="data_indeterminate"
                                             :disabled="!drawerParams.is_edit"
                                             @change="handleDataChange">全选</el-checkbox>
                            </div>
                            <div class="data-item-tip">未选择的列表则不受限制</div>
                            <div class="item-list">
                                <div class="item" v-for="(item,index) in drawerParams.data_list" :key="index">
                                    <el-checkbox v-model="item.selected"
                                                 :disabled="!drawerParams.is_edit">{{item.group_name}}</el-checkbox>
                                </div>
                            </div>
                        </div>
                        <div class="data-item" style="margin-top:40px" v-if="drawerParams.data_value_list.length > 0">
                            <div class="data-item-header">
                                <div class="label">2.请选择以上功能列表可查看的{{drawerParams.field_desc}}</div>
                                <el-checkbox v-model="drawerParams.data_value_check_all" 
                                             :indeterminate="data_value_indeterminate"
                                             :disabled="!drawerParams.is_edit"
                                             @change="handleDataValueChange">全选</el-checkbox>
                            </div>
                            <div class="search" style="margin-top:16px">
                                <el-input :prefix-icon="Search" :disabled="!drawerParams.is_edit" v-model="drawerParams.search_text" :placeholder="'请输入' + drawerParams.field_desc + '名称搜索'"></el-input>
                            </div>
                            <div class="item-list">
                                <div class="item" v-for="(item,index) in drawerParams.data_value_filter_list" :key="index">
                                    <el-checkbox v-model="item.selected"
                                                 :disabled="!drawerParams.is_edit">{{item.name}}</el-checkbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed ,watch} from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'


import { getDataRightsByRole,
         getDataGroupList,
         getDataGroupValueList,
         saveRoleData } from 'services/setting'

const props = defineProps<{
    role_id: number | undefined,
}>();

const tableData = reactive({
    data:[]
})

const drawerParams = reactive({
    drawerShow:false,
    title:'',
    field_id:undefined,
    field_desc:'',
    is_edit:false,
    is_astrict:false,
    data_list:[],
    data_check_all:false,
    data_value_list:[],
    data_value_check_all:false,
    data_value_indeterminate:false,
    data_value_filter_list:[],
    search_text:''
})


const getData = (role_id:number) => {
    getDataRightsByRole({role_id}).then((res:any) => {
        tableData.data = res || []
    })
}

const handleView = (row:any) => {
    Promise.all([
        getDataGroupList({
            field_id:row.field_id,
            role_id: props.role_id || 0
        }),
        getDataGroupValueList({
            field_id:row.field_id,
            role_id: props.role_id || 0
        })
    ]).then((res:any) => {
        drawerParams.title = `${row.field_desc}数据权限详情`
        drawerParams.field_desc = row.field_desc
        drawerParams.is_astrict = row.group_names ?  true :  false
        drawerParams.field_id = row.field_id
        drawerParams.drawerShow = true;
        drawerParams.data_list = res[0] || []
        drawerParams.data_value_list = res[1] || []
        drawerParams.data_value_filter_list = res[1] || []

    })
    
   
}

const handleDataChange = (val: boolean) => {
    drawerParams.data_list.forEach((item:any) => {
        item.selected = val
    })
}

const handleDataValueChange = (val: boolean) => {
    drawerParams.data_value_indeterminate = false
    drawerParams.data_value_filter_list.forEach((item:any) => {
        item.selected = val
    })
}

const save = () => {
    let values:number[] = [];
    let group_ids:number[] = []
    drawerParams.data_value_filter_list.forEach((item:any) => {
        if (item.selected) {
            values.push(item.id)
        }
    });

    drawerParams.data_list.forEach((item:any) => {
        if (item.selected) {
            group_ids.push(item.id)
        }
    })

    if (drawerParams.is_astrict === true) {
        group_ids = []
        values = []
    }

    saveRoleData({
        field_id: drawerParams.field_id || 0,
        role_id: props.role_id || 0,
        values,
        group_ids,
    }).then((res:any) => {
        ElMessage.success('保存成功')
        drawerParams.drawerShow = false;
        drawerParams.is_edit = false;
        getData(props.role_id || 0)
    })
}

const data_indeterminate = computed(() => {
    let list = drawerParams.data_list.filter((item:any) => {
        return item.selected === true
    });
    if (list.length == 0) {
        return false
    }

    return !(drawerParams.data_list.length == list.length)
})

const data_value_indeterminate = computed(() => {
    let list = drawerParams.data_value_filter_list.filter((item:any) => {
        return item.selected === true
    });
    if (list.length == 0) {
        return false
    }

    return !(drawerParams.data_value_filter_list.length == list.length)
})

watch(() => props.role_id, (val) => {
    if (val) {
        getData(val)
    }
},{
    immediate:true
})

watch(() => drawerParams.search_text, (val) => {
    let list = drawerParams.data_value_list
    drawerParams.data_value_filter_list = list.filter((item:any) => {
        return item.name.indexOf(val) > -1
    })
}, {
    immediate:true
})

</script>
<style lang="scss">
.data-rights{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .tips{
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
        margin-bottom: 16px;
    }

    .grid-wrap{
        flex: 1;
        height: 0;
    }

    .drawer-panel{
        .row{
            display: flex;
            align-items: center;
        }

        .title{
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            margin-right: auto;
        }

        .data-wrap{
            width: 100%;
            box-sizing: border-box;
            padding: 16px 24px;
            background: #F5F7FA;
            border-radius: 8px;
            margin-top: 19px;

            .data-item-header{
                display: flex;
                align-items: center;

                .label{
                    margin-right: auto;
                    font-size: 14px;
                    font-weight: 500;
                    color: #303133;
                    line-height: 22px;
                }
            }

            .data-item-tip{
                font-size: 12px;
                font-weight: 400;
                color: #909399;
                line-height: 20px;
                margin-top: 4px;
            }

            .item-list{
                display: flex;
                flex-wrap: wrap;
                
                .item{
                    width: 152px;
                    height: 32px;
                    border-radius: 8px;
                    margin-top: 16px;
                    margin-right: 8px;
                    background-color: #fff;
                    box-sizing: border-box;
                    padding: 0 8px;

                    &:nth-child(3n){
                        margin-right: 0;
                    }
                }
            }
        }
    }

}
</style>